<po-page-slide
  #pageSlideColumnsManager
  p-size="auto"
  [p-title]="literals.columnsManager"
  [p-click-out]="true"
  [p-components-size]="componentsSize"
  (p-close)="checkChanges([], true)"
>
  <div>
    <div class="po-table-column-manager-body">
      <po-table-list-manager
        name="visibleColumns"
        [(ngModel)]="visibleColumns"
        p-columns="1"
        [p-columns-manager]="columns"
        [p-components-size]="componentsSize"
        [p-options]="columnsOptions"
        [p-hide-action-fixed-columns]="hideActionFixedColumns"
        (p-change)="checkChanges($event, false)"
        (p-change-position)="changePosition($event)"
        (p-change-fixed)="emitColumnFixed($event)"
      >
      </po-table-list-manager>
    </div>

    <div class="po-table-column-manager-footer">
      <po-button
        class="po-table-column-manager-footer-restore"
        p-kind="tertiary"
        [p-label]="literals.restoreDefault"
        [p-size]="componentsSize"
        (p-click)="restore()"
      >
      </po-button>
    </div>
  </div>
</po-page-slide>
